<%@ page contentType="text/html; charset=utf-8" language="java"
	errorPage=""%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<head>
<title>添加EpowerWordForDay</title>
<style type="text/css" media="screen">
#lightbox {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	z-index: 10000;
	text-align: center;
}

.noscroll {
	overflow: hidden;
}
</style>
<script type="text/javascript"
	src="<s:url value="/js/formValidator3.5.js" includeParams="none"/>"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="<s:url value="/js/epowerautocomplete.js" includeParams="none"/>"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="<s:url value="/js/jquery.autocomplete.js" includeParams="none"/>"
	charset="UTF-8"></script>
 <link href="<s:url value="/css/jquery.autocomplete.css" includeParams="none"/>" rel="stylesheet" type="text/css"/>
<script charset="utf-8" src="../kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="../kindeditor/lang/zh_CN.js"></script>

<script type="text/javascript">
//表示当前高亮的节点
var highlightindex = -1;
$(document).ready(function() {
	if ('<s:property value="msg"/>' != '') {
		alert('<s:property value="msg"/>');
	}
	initValidator();
	
	    var mainWordInput = $("#querymainword");
	    var wordInput = $("#queryword");//
	    var wordInputOffset = wordInput.offset();
	    var addExample = $("#addExample");
	    var exampleSentence = $("#exampleSentence");
	    //自动补全框最开始应该隐藏起来<input type= 'hidden' value='内容 ' name='sentence' id='22222'/> 
	    $("#auto").hide().css("border","1px black solid").css("position","absolute")
	            .css("top",wordInputOffset.top + wordInput.height() + 5 + "px")
	            .css("left",wordInputOffset.left + "px").width(wordInput.width() + 2);
	    
	    addExample.click(function(){
	    	var newspace = $("<&nbsp>");
	    	var newspan = $("<span>").html("例句:");
	    	var idnum = Math.floor(Math.random()*(100-10)+10);
	    	var idx = Math.floor(Math.random()*(100-10)+10);
	    	var newtext = $("<input>").attr("type","text").attr("size","44").attr("id",idnum);
	    	var newspan2 = $("<span>").html("翻译:");
	    	var newtext2 = $("<input>").attr("type","text").attr("size","44");
	    	var newhidden = $("<input>").attr("type","hidden").attr("name","sentence").attr("id",newtext.attr("id")*idx);
	    	
	    	var hiddenid = newtext.attr("id")*idx;
	    	//为newtext添加焦点失去事件
	    	newtext.blur(function(){
	    		var hidden = $("#"+hiddenid);
	    		var value = newtext.attr("value")+"##"+newtext2.attr("value")+"##"+0;
	    		hidden.attr("value",value);
	    	});
	    	newtext2.blur(function(){
	    		var hidden = $("#"+hiddenid);
	    		var value = newtext.attr("value")+"##"+newtext2.attr("value")+"##"+0;
	    		hidden.attr("value",value);
	    	});
	    	exampleSentence.append(newspan).append(newtext).append(newspace);
	    	exampleSentence.append(newspan2).append(newtext2).append($("<br/>"));
	    	exampleSentence.append(newhidden);
	    });
	    
	    mainWordInput.keyup(function(event) {
	        var myEvent = event || window.event;
	        var keyCode = myEvent.keyCode;
	        if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) {
	            var wordText = $("#querymainword").val();
	            var autoNode = $("#mainAutoComplete");
	            if (wordText != "") {
	                $.post("<%=request.getContextPath()%>/jsonepowermainword/queryMainEpowerWord.action?"+ new Date().getTime(),{spelling:wordText},function(data){
	                    autoNode.html("");
	                    var wordNodes ;
	                    if(data.result!=null){
	                    wordNodes = data.result.mainwords;
	                    $("<option>").html("---请选择---").appendTo(autoNode);
	                    for(var i=0;i<wordNodes.length;i++){
							var wordNode = wordNodes[i];
							var newNode = $("<option>").html(wordNode['spelling']).attr("value",wordNode['id']);
							newNode.appendTo(autoNode);
							newNode.mouseover(function (){
                                if(highlightindex!=-1){
                                    autoNode.children("div").eq(highlightindex)
                                        .css("background-color","white");
                                }
                                highlightindex = $(this).attr("id");
                                $(this).css("background-color","black");
                            });
                            newNode.mouseout(function (){   
                                if(highlightindex!=-1){   
                                    autoNode.children("div").eq(highlightindex)   
                                        .css("background-color","white");   
                                }
                                highlightindex = $(this).attr("id");   
                                $(this).css("background-color","white");   
                            });
                            //增加鼠标点击事件   
                            newNode.click(function (){
                                var completeText = $(this).text(); 
                                highlightindex = -1;
                                mainWordInput.val(completeText);
                                $('#groupid').val($(this).val());
                            });
						}
	                    //如果服务器段有数据返回，则显示弹出框
	                    if (wordNodes.length > 0) {
	                        autoNode.show();
	                    } else {
	                        //弹出框隐藏的同时，高亮节点索引值也制成-1
	                        highlightindex = -1;
	                    }
	                   }
	                },"json");
	            } else {
	                autoNode.html("");
	                highlightindex = -1;
	            }
	        }
	    });
	    
	    wordInput.keyup(function(event) {
	        var myEvent = event || window.event;
	        var keyCode = myEvent.keyCode;
	        if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) {
	            var wordText = $("#queryword").val();
	            var autoNode = $("#AutoComplete");
	            if (wordText != "") {
	                $.post("<%=request.getContextPath()%>/epowerwordfrequency/queryWords.action?"+ new Date().getTime(),{spelling:wordText},function(data){
	                    autoNode.html("");
	                    var wordNodes ;
	                    if(data.result!=null){
	                    wordNodes = data.result.words;
	                    $("<option>").html("---请选择---").appendTo(autoNode);
	                    for(var i=0;i<wordNodes.length;i++){
							var wordNode = wordNodes[i];
							var newNode = $("<option>").html(wordNode['spelling']).attr("value",wordNode['id']);
							newNode.appendTo(autoNode);
							newNode.mouseover(function (){
                                if(highlightindex!=-1){
                                    autoNode.children("div").eq(highlightindex)
                                        .css("background-color","white");
                                }
                                highlightindex = $(this).attr("id");
                                $(this).css("background-color","black");
                            });
                            newNode.mouseout(function (){   
                                if(highlightindex!=-1){   
                                    autoNode.children("div").eq(highlightindex)
                                        .css("background-color","white");   
                                }
                                highlightindex = $(this).attr("id");   
                                $(this).css("background-color","white");   
                            });
                            //增加鼠标点击事件   
                            newNode.click(function (){
                                var completeText = $(this).text(); 
                                highlightindex = -1;
                                wordInput.val(completeText);
                                $('#spelling').val(completeText);
                            }); 
						}
	                    //如果服务器段有数据返回，则显示弹出框
	                    if (wordNodes.length > 0) {
	                        autoNode.show();
	                    } else {
	                        //弹出框隐藏的同时，高亮节点索引值也制成-1
	                        highlightindex = -1;
	                    }
	                   }
	                },"json");
	            } else {
	                autoNode.html("");
	                highlightindex = -1;
	            }
	        }
	    });
});
function initValidator() {
	$.formValidator.initConfig({formid:"addform",onerror:function(msg){alert(msg);}});
	
		$('#mainSpelling').formValidator({onshow:"请输入主词",onfocus:"spelling不能为空",oncorrect:"输入正确"}).functionValidator({
			fun:function(val,elem){
				$(elem).val($.trim(val));
			}
		}).inputValidator({min:1,max:9999,onerror:"spelling不能为空,请确认"});
		$('#spelling').formValidator({onshow:"请输入spelling",onfocus:"spelling不能为空",oncorrect:"输入正确"}).functionValidator({
			fun:function(val,elem){
				$(elem).val($.trim(val));
			}
		}).inputValidator({min:1,max:9999,onerror:"spelling不能为空,请确认"});
		$('#root').formValidator({onshow:"请输入root",onfocus:"root不能为空",oncorrect:"输入正确"}).functionValidator({
			fun:function(val,elem){
				$(elem).val($.trim(val));
			}
		}).inputValidator({min:1,max:9999,onerror:"root不能为空,请确认"});
		$('#showtime').formValidator({onshow:"请输入showtime",onfocus:"showtime不能为空",oncorrect:"输入正确"}).functionValidator({
			fun:function(val,elem){
				$(elem).val($.trim(val));
			}
		}).inputValidator({min:1,max:9999,onerror:"showtime不能为空,请确认"});
		$('#rank').formValidator({onshow:"请输入rank",onfocus:"rank不能为空",oncorrect:"输入正确"}).functionValidator({
			fun:function(val,elem){
				$(elem).val($.trim(val));
			}
		}).inputValidator({min:1,max:9999,onerror:"rank不能为空,请确认"});
		$('#rating').formValidator({onshow:"请输入rating",onfocus:"rating不能为空",oncorrect:"输入正确"}).functionValidator({
			fun:function(val,elem){
				$(elem).val($.trim(val));
			}
		}).inputValidator({min:1,max:9999,onerror:"rating不能为空,请确认"});
}
</script>
<script type="text/javascript">
	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="epowerWordForDay.content"]', {
			uploadJson : '../fileupload/fileupload.action',
			items : [ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor',
					'bold', 'italic', 'underline', 'removeformat', '|',
					'justifyleft', 'justifycenter', 'justifyright',
					'insertorderedlist', 'insertunorderedlist', '|',
					'emoticons', 'image', 'link' ],
		});
	});
</script>
</head>
<body>
	<s:form theme="simple" action="addEpowerWordForDay" method="post"
		id="addform">
		<div id="sa" class="sa p10 mb10">
			<table>
			<tr>
					<td><input type="hidden"
						value="0" id="main"
						name="epowerWordForDay.main"/>
				</tr>
				<tr>
					<td><input type="hidden"
						value="<s:property value="epowerWordForDay.id"/>" id="id"
						name="epowerWordForDay.id"/>
				</tr>
				<tr>
				<th>主词拼写：</th>
					<td><input type="text"
						value="<s:property value="epowerWordForDay.mainSpelling"/>" id="mainSpelling"
						name="epowerWordForDay.mainSpelling" size="64" />
						<div id="mainSpellingTip"></div></td>
						<input type="hidden" value="<s:property value="epowerWordForDay.groupid"/>" id="groupid">
				</tr>
				<tr>
					<th>单词拼写：</th>
					<td><input type="text"
						value="<s:property value="epowerWordForDay.spelling"/>" id="spelling"
						name="epowerWordForDay.spelling" size="64" />
						<div id="spellingTip"></div></td>
				</tr>
				<tr>
					<th>展示的时间：</th>
					<td><input type="text"
						value="<s:property value="epowerWordForDay.showtime"/>"
						id=showtime name="epowerWordForDay.showtime" size="64" />
						<div id="showtimeTip"></div></td>
				</tr>

				<tr>
					<th>单词次序：</th>
					<td><input type="text"
						value="<s:property value="epowerWordForDay.rank"/>" id=rank
						name="epowerWordForDay.rank" size="64" />
						<div id="rankTip"></div></td>
				</tr>

				<tr>
					<th>推荐级别：</th>
					<td><input type="text"
						value="<s:property value="epowerWordForDay.rating"/>" id=rating
						name="epowerWordForDay.rating" size="64" />
						<div id="ratingTip"></div></td>
				</tr>
               <!-- 
				<tr>
					<th>状态：</th>
					<td><input type="text"
						value="<s:property value="epowerWordForDay.status"/>" id=status
						name="epowerWordForDay.status" size="64" />
						<div id="statusTip"></div></td>
				</tr>-->
				<tr>
					<th>词根：</th>
					<td><input type="text"
						value="<s:property value="epowerWordForDay.root"/>" id=root
						name="epowerWordForDay.root" size="64" />
						<div id="statusTip"></div></td>
				</tr>
				<tr>
					<td><input type="hidden"
						value="<s:property value="epowerWordForDay.id"/>" id=groupid
						name="epowerWordForDay.groupid" size="64" />
				</tr>
				<tr>
					<th>div的内容：</th>
					<td>
						<!-- 
					<input type="text" value="<s:property value="epowerWordForDay.content"/>" id=content name="epowerWordForDay.content" size="64"/>
					<div id="contentTip"></div> --></td>
				</tr>
				<tr>
					<th></th>
					<td><textarea id=content name="epowerWordForDay.content"
							style="width: 500px; height: 150px; visibility: hidden;">
						<s:property value="epowerWordForDay.content" />
				 </textarea>
						<div id="contentTip"></div></td>
				</tr>
			</table>
			
		</div>
		<div class="sa p10 mb10">
		<input type="hidden" value="" id="querymainword" size="33" />
		<input type="hidden" value="" id="queryword" size="33" />
		<!-- 暂时去掉
			<span>搜索主词:</span>&nbsp;&nbsp;<input type="text" value="" id="querymainword" size="33" />
			<select id="mainAutoComplete" style="display: none;">
			  <option>---请选择---</option>
			</select>
			&nbsp;&nbsp;
			<span>搜索副词:</span>&nbsp;&nbsp;<input type="text" value="" id="queryword" size="33" />
			<select id="AutoComplete" style="display: none;">
			  <option>---请选择---</option>
			</select>
			<br/><br/>
			-->
			<button type="button" id="addExample">增加例句</button>
			<div id="exampleSentence">
			</div>
		</div>
		<div id="sb" class="sb p1020">
			<s:submit value="保存" cssClass="btn1" />
		</div>
		<div style="text-align: center; color: red;">
			<s:actionmessage />
		</div>
	</s:form>
	
</body>
